<template>
  <div>
    <div>
      <el-card
        title="公告管理"
        style="width: 100%"
        class="box-card sure-height"
      >
        <div slot="header" class="clearfix">
          <span>公告管理</span>
        </div>
        <div
          style="
            float: right;
            padding: 3px 0;
            display: flex;
            position: relative;
            top: -12px;
          "
        >
          <el-input v-model="keyWord"></el-input
          ><el-button type="primary" size="small" @click="findSome()"
            >搜索</el-button
          ><el-button type="success" size="small" @click="addVisible = true"
            >新增</el-button
          >
        </div>
        <el-table
          :data="
            noticeData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          "
          border
          style="width: 100%"
          :row-style="{ height: '110px' }"
        >
          <el-table-column  prop="id" label="编号"> </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="topic" label="标题"> </el-table-column>
          <el-table-column prop="username" label="发布人"></el-table-column>
          <el-table-column prop="timeOut" label="发布时间"></el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="context" label="内容"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="getNoticesMessage(scope.row)" :disabled="discover"
                >编辑</el-button
              >
              <el-button
                size="mini"
                :disabled="discover"
                @click="deleteNotice(scope.row.id)" 
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 3, 5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="noticeData.length"
        >
        </el-pagination>
      </el-card>
    </div>
    <!-- 添加用户对话框 -->
    <el-dialog title="添加公告" :visible.sync="addVisible" width="30%">
      <el-form :model="addNoticesForm" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="addNoticesForm.topic"></el-input>
        </el-form-item>
        <el-form-item label="发布人">
          <el-input v-model="addNoticesForm.username"></el-input>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-input v-model="addNoticesForm.timeOut"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="addNoticesForm.context"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNotices()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户对话框 -->
    <el-dialog title="修改公告" :visible.sync="editVisible" width="30%">
      <el-form :model="editNoticesForm" label-width="60px">
        <el-form-item label="标题">
          <el-input v-model="editNoticesForm.topic"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="editNoticesForm.context"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editNotice()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {GetAllNotices, AddNotices, EditNotices,DeleteNotices} from '../../api/notices'
export default {
  data() {
    return {
      discover:this.$store.state.discover,
      noticeData: [],
      keyWord: "",
      currentPage: 1,
      total: "",
      pageSize: 5,
      addVisible: false,
      addNoticesForm: {
        topic: "",
        username: "",
        timeOut: "",
        context: "",
      },
      editVisible: false,
      editNoticesForm: {
        id:'',
        topic: "",
        context: "",
      },
    };
  },
  created() {
    this.getAllNotices(this.keyWord);
    let data = sessionStorage.getItem('state');
    if(data == null){
			this.$router.push('/login')
		}
  },
  methods: {
    //得到所有公告信息
    getAllNotices(data) {
      GetAllNotices({ context: data }).then((res) => {
        console.log(res);
        this.noticeData = res.data.allNotices;
        this.total = this.noticeData.length;
      });
    },
    //搜索公告
    findSome() {
      this.getAllNotices(this.keyWord);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //修改公告
    getNoticesMessage(row){
      this.editVisible = true;
      this.editNoticesForm.id = row.id
      this.editNoticesForm.topic = row.topic
      this.editNoticesForm.context = row.context
    },
    editNotice(){
      EditNotices(this.editNoticesForm).then((res)=>{
        console.log(res);
        this.editVisible = false;
        this.getAllNotices(this.keyWord);
      })
    },
    //添加公告
    addNotices(){
      AddNotices(this.addNoticesForm).then((res)=>{
        console.log(res);
        this.addVisible = false
        this.$message.success("添加成功")
        this.getAllNotices(this.keyWord);
      })
    },
    //删除公告
    deleteNotice(notice_id){
      DeleteNotices({id:notice_id}).then((res)=>{
        console.log(res);
        this.$message.success("删除成功")
        this.getAllNotices(this.keyWord);
      })
    }
  },
};
</script>

<style scoped>
.sure-height {
  height: 800px !important;
}
</style>